<template>
  <div id="wft-online-edit" :class="['animate__animated', { 'light': mode == 'light' }]">
    <div class="edit-title" :style="editTitleStyle">
      <div>
        <h2>在线编辑器</h2>
        <el-upload action="#" :limit="1" accept=".json, .txt" :show-file-list="false" :before-upload="beforeUpload" class="wft-margin-left-20">
          <el-button :style="buttonStyle" size="mini" icon="el-icon-upload">导入(json / txt)</el-button>
        </el-upload>
        <el-button :style="buttonStyle" @click="updatePanelJson()" size="mini" icon="el-icon-check" class="wft-margin-left-20">保存</el-button>
      </div>
      <div>
        <!-- 主题切换 -->
        <div @click="modeChange" :class="['mode-change', { 'tool-dark': mode == 'dark', 'tool-light': mode == 'light' }]">
          <img v-show="mode == 'dark'" src="../static/img/toolbar/dark.png">
          <img v-show="mode == 'light'" src="../static/img/toolbar/light.png">
        </div>
        <el-button @click="$emit('close')" size="medium" circle icon="el-icon-close" />
      </div>
    </div>
    <div class="edit-container">
      <MonacoEditor v-if="showMonacoEditor" :value="editJson" @change="editorChange" :options="options" />
    </div>
  </div>
</template>
<script>
import MonacoEditor from '../components/common/MonacoEditor/index.vue'
export default {
  data() {
    return {
      editJson: '', // 这个用来回显编辑器内容
      updateJson: '', // 用这个来存储编辑器内容
      mode: 'light',
      options: {
        language: 'json',
        theme: 'vs'
      },
      showMonacoEditor: false
    }
  },
  components: { MonacoEditor },
  computed: {
    editTitleStyle() {
      const map = {
        dark: {
          backgroundColor: '#1e1e1e',
          borderColor: '#2d2d30',
          color: '#BFCBD9'
        },
        light: {
          backgroundColor: '#efeff5',
          borderColor: '#f5f5f5',
          color: '#086D6D'
        }
      }
      return {
        backgroundColor: map[this.mode].backgroundColor,
        borderColor: map[this.mode].borderColor,
        color: map[this.mode].color
      }
    },
    buttonStyle() {
      const map = {
        dark: {
          backgroundColor: '#1e1e1e',
          borderColor: '#BFCBD9',
          color: '#BFCBD9'
        },
        light: {
          backgroundColor: '#efeff5',
          borderColor: '#086D6D',
          color: '#086D6D'
        }
      }
      return {
        backgroundColor: map[this.mode].backgroundColor,
        borderColor: map[this.mode].borderColor,
        color: map[this.mode].color
      }
    }
  },
  destroyed() {
    window.removeEventListener('keydown', this.onkeyDownHandler)
  },
  methods: {
    // 编辑器内容变化
    editorChange(val) {
      this.updateJson = val || ''
    },
    // 初始化编辑器
    init(panelJson) {
      this.showMonacoEditor = false
      this.editJson = JSON.stringify(panelJson)
      this.mode = 'light'
      const onlineEdit = document.getElementById('wft-online-edit')
      onlineEdit.classList.add('animate__jackInTheBox')
      onlineEdit.classList.remove('animate__zoomOut')
      setTimeout(() => {
        this.showMonacoEditor = true
      }, 100)
      window.addEventListener('keydown', this.onkeyDownHandler)
    },
    // 关闭编辑器
    close() {
      const onlineEdit = document.getElementById('wft-online-edit')
      onlineEdit.classList.add('animate__zoomOut')
      onlineEdit.classList.remove('animate__jackInTheBox')
      window.removeEventListener('keydown', this.onkeyDownHandler)
    },
    // 导入
    beforeUpload(file) {
      const { name } = file
      if(name.indexOf('.json') < 0 && name.indexOf('.txt') < 0) {
        return this.$message.error('请选择json文件或txt文件进行导入!')
      }
      const fr = new FileReader()
      fr.readAsText(file)
      fr.onload = () => {
        try {
          let data = JSON.parse(fr.result)
          this.editJson = JSON.stringify(data)
          this.$message.success('导入成功')
        } catch(e) {
          this.$message.error('文件解析错误，请确保为json文件且格式数据正确!')
        }
      }
      return false
    },
    // 键盘按下
    onkeyDownHandler(event) {
      if(event.ctrlKey && event.key == 's') {
        event.preventDefault()
        this.updatePanelJson()
      }
    },
    // 保存
    updatePanelJson() {
      this.$confirm('是否覆盖源试图内容？此操作不可逆！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('updatePanelJson', this.updateJson)
        this.$message.success('视图已更新~');
      })
    },
    // 模式切换
    modeChange() {
      if(this.mode == 'light') {
        this.mode = 'dark'
      } else {
        this.mode = 'light'
      }
      const themes = {
        dark: 'vs-dark',
        light: 'vs'
      }
      this.options.theme = themes[this.mode]
    }
  }
}
</script>
<style scoped>
#wft-online-edit {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

#wft-online-edit > .edit-title {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: var(--workspace-config-background); */
  background-color: #efeff5;
  border-bottom: 1px solid;
  border-bottom-color: #f5f5f5;
  padding: 0 15px;
  box-sizing: border-box;
}
#wft-online-edit > .edit-title > div {
  height: 100%;
  display: flex;
  align-items: center;
}

#wft-online-edit > .edit-container {
  width: 100%;
  height: calc(100% - 60px);
  background-color: #f5f5f5;
}

#wft-online-edit > .edit-title .mode-change {
  height: 70%;
  padding: 8px 15px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s;
  margin-right: 8px;
}
#wft-online-edit > .edit-title .mode-change img {
  height: 100%;
}

#wft-online-edit > .edit-title .tool-dark:hover {
  background-color: rgba(46, 51, 56, .5);
}
#wft-online-edit > .edit-title .tool-light:hover {
  background-color: rgba(46, 51, 56, .09);
}

.wft-margin-left-20 {
  margin-left: 20px;
}
</style>